$(function () {
    var $lis = $('#div1 ul li'),
        len = $lis.length,
        height = $lis.height(),
        lastIndex = 0,
        index = 0,
        timer = null;
  
    // 创建按钮并且绑事件
    for (var i = 0; i < len; i++) {
      $(`<li>${i+1}</li>`).addClass(i===0 ? 'ac': '').appendTo('#div1 ol').on('click', function () {
        lastIndex = index;
        index = $(this).index()
        $('#div1 ul').stop().animate({
          top: -index * height
        }, 1000)
        $('#div1 ol li').eq(lastIndex).removeClass('ac')
        $('#div1 ol li').eq(index).addClass('ac')
      })
    }
    // 末尾追加图片
    $lis.eq(0).clone().appendTo('#div1 ul')
  
    // 计算ul宽度
    $('#div1 ul').height((len + 1) * height)
  
    // 向后切换
    $('#goNext').on('click', function () {
      lastIndex = index;
      index++;
      if (index === len) {
  
        $('#div1 ul').stop().animate({
          top: -len * height
        },1000, () => {
          $('#div1 ul').css({left: 0})
        })
        index = 0
      } else {
        $('#div1 ul').stop().animate({
          top: -index * height
        }, 1000)
      }
      $('#div1 ol li').eq(lastIndex).removeClass('ac')
      $('#div1 ol li').eq(index).addClass('ac')
    })
  
    // 向前
    $('#goPrev').on('click', function () {
      lastIndex = index;
      index--;
      if (index < 0) {
        index = len - 1;
        $('#div1 ul').css({top: -len * height})
      }
      $('#div1 ul').stop().animate({
        top: -index * height
      }, 1000)
    
    })
    $('#div1').hover(function () {
      clearInterval(timer)
    }, (function auto () {
      timer = setInterval(() => {
        $('#goNext').trigger('click')
      }, 2000)
      return auto
    })())
    
  })